<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-10-21 16:27:37
 * @LastEditors: tc
 * @LastEditTime: 2022-04-11 14:39:46
-->
<template>
    <div class="middlebox">
        <div class="title-h">
            <div>
                <img src="@/assets/img/dashboard/装饰_.png" alt="">
                值班人员信息
            </div>
            <img src="@/assets/img/dashboard/边角.png" alt="">
        </div>
        <div class="duty-box">
            <div class="duty-top">
                <div class="duty-left">
                    <el-image :src="require('@/assets/img/dashboard/头像.png')" fit="fit"/>
                </div>
                <div class="duty-right">
                    <div>
                        责任人:{{data.patrolName?data.patrolName:'暂无'}}
                    </div>
                    <div>
                        电话:{{data.patrolPhone?data.patrolPhone:'--'}}
                    </div>
                    <div>
                        值班人员:{{userInfo?userInfo.name:'--'}} <span :style="{'color':isonline ==1 ? '#00FF4E':''}">(在线)</span>
                    </div>
                    <div>
                        电话:{{userInfo?userInfo.phone:'--'}}
                    </div>
                </div>
            </div>
            <div class="duty-bottom">
                <h1 class="h1-ty">责任目标</h1>
                <div class="title-txt" v-html="data.patrolDuty?data.patrolDuty:'暂无'"/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            default: () => {}
        }
    },
    data() {
        return {
            isonline:1,
            userInfo:null
        }
    },
    watch: {
        data: {
            handler(val) {

            },
            deep:true
        }
    },
    mounted() {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    },
    unmounted() {

    },
    methods: {
       
    }
}
</script>

<style lang="scss" scoped>
.middlebox {
    height: 100%;
    box-sizing: border-box;
    .duty-box {
        display: flex;
        flex-flow: column;
        width: 100%;
        background-color: rgba(0, 50, 76, 0.85);
        margin-top: 10px;
        padding: 20px;
        box-sizing: border-box;
        height: calc(100% - 60px);
        .duty-top {
            font-family: FZHZ;
            letter-spacing:2px;
            display: flex;
            color: #00DFFF;
            font-size: 12px;
            margin-bottom: 10px;
            .duty-left {
                display: flex;
                flex-basis: 98px;
            }
            .duty-right {
                display: flex;
                flex: 1;
                margin-left: 35px;
                flex-flow: column;
                justify-content: space-around;
                >div {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
            }
        }
        .duty-bottom {
            display: flex;
            flex-flow: column;
            height: calc(100% - 118px);
            .h1-ty {
                font-size: 18px;
                font-weight: bold;
                color: #00DFFF;
            }
            .title-txt {
                font-size: 14px;
                text-indent:30px;
                line-height: 20px;
                overflow-y: auto;
                // text-overflow: ellipsis;
                // display: -webkit-box;
                // -webkit-line-clamp: 6;
                // -webkit-box-orient: vertical;
            }
            .title-txt::-webkit-scrollbar {
                display: none;
            }
        }
    }
}
</style>